@import '../../_styles/variables.module.scss';

.segmentedControl {
    display: flex;
    padding: 0;
    margin: 0;
}

.segmentedControlItem {
    background-color: transparent;
    border: 1px solid $color-contrast-5;
    color: $color-contrast-1;
    text-decoration: none;
    font-family: $typeface-secondary;
    font-size: 13/16+rem;
    cursor: pointer;
    transition: color .15s ease-in-out, 
                background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                box-shadow .15s ease-in-out;
    padding: 10px 25px;
    display: block;

    &:hover {
        background-color: darken($color-primary, 5%);
        border-color:  darken($color-primary, 5%);
    }

    &:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba($color-primary, 0.5);
    }

    &:last-child {
        border-radius: 0 50px 50px 0;
        border-left: 0;
    }

    &:first-child {
        border-radius: 50px 0 0 50px;
    }
}

.segmentedControlItemSelected {
    composes: segmentedControlItem;
    border-color: $color-primary;
    background-color: $color-primary;
}

